<template>
  <div class="page pd-l">
    <div>
      <div v-for="(n, i) in textbooks" :key="n.id" class="item mgb-l">
        <div class="psr _hd bs br ta-c" @tap="handleToggleOpen(n.id)">
          {{n.name}}
          <div class="_hdl-open">
            <i class="if" :class="{'icon-up': n.opened, 'icon-down': !n.opened}"></i>
          </div>
        </div>
        <div class="_bd" :class="{'open': n.opened}">
          <div v-for="(nn, ii) in n.courses" :key="nn.id" class="pdv bd-b weui-flex"
            @tap="handleCourseSelect(nn.id)">
            <div class="weui-flex__item">{{nn.name}}</div>
            <div class="ta-r"><input type="radio" :checked="nn.checked"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as $textbook from '@/api/textbook'
import {mapState, mapActions, mapGetters} from 'vuex'

export default {
  computed: {
    ...mapGetters('course-select', [
      'textbooks'
    ])
  },
  async onShow () {
    try {
      await this.handleInit()
    } catch (e) {
      this.$debug({err: e})
    }
  },
  methods: {
    ...mapActions('course-select', [
      'handleInit',
      'handleToggleOpen',
      'handleCourseSelect',
    ])
  }
}
</script>

<style scoped lang="less">
._hd {
  height: 50px;
  line-height: 50px;
  ._hdl-open {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
  }
}
._bd {
  display: none;
  &.open {
    display: block;
  }
}
</style>
